<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>
<link rel="stylesheet" href="/res/layui/css/admin.css" media="all">
<style>


    .s {
        clear: both;
        margin-top: 10px
    }

    .quantity input {
        width: 25%;
        padding: 5px 10px;
        text-align: center;
    }

    .upload_more {
        margin: 5px;
        height: 120px;
        width: 120px;
    }

    .layadmin-backlog-body p cite {
        font-size: 20px;
        color: #333;
    }

</style>

<div class="layui-fluid" id="app">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <p>
                <span class="layui-breadcrumb" style="visibility: visible;">
                  <!--<a href="/admin/start/#/">首页</a><span lay-separator="">/</span>-->
                  <a href="index">项目管理</a><span lay-separator="">/</span>
                  <a href="stage?id={$stage.project_id}">项目内容</a><span lay-separator="">/</span>
                  <a href="javascript:;" onclick="location.reload();"><cite>施工详情</cite></a>
                </span>

                <span class="layui-breadcrumb" style="visibility: visible;float: right">
                  <a href="javascript:;"><cite><i class="layui-icon">&#xe620;</i> 修改</cite></a>
                </span>
            </p>
        </div>
    </div>

    <div class="layui-row layui-col-space15">

        <div class="layui-col-md3">


            <div class="layui-card">
                <div class="layui-card-header">客户信息</div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim=""
                         style="width: 100%; height: 550px !important;">
                        <div carousel-item="">
                            <ul class="layui-row layui-col-space10 layui-this">
                                <li class="layui-col-xs12"><a lay-href="" class="layadmin-backlog-body"><h3>户主</h3>
                                    <p><cite>
                                        {foreach name="$res.client" item="it"}
                                        {$it.name}、
                                        {/foreach}</cite>
                                    </p>
                                </a>
                                </li>

                                <li class="layui-col-xs12"><a lay-href="" class="layadmin-backlog-body"><h3>施工阶段</h3>
                                    <p><cite>{$stage.title}</cite></p></a></li>
                                <li class="layui-col-xs12"><a lay-href="" class="layadmin-backlog-body"><h3>开工时间</h3>
                                    <p><cite>{$stage.start_time}</cite></p></a></li>

                                <li class="layui-col-xs12"><a lay-href="" class="layadmin-backlog-body"><h3>户型</h3>
                                    <p><cite>{$res.house_type}</cite></p></a></li>
                                <li class="layui-col-xs12"><a lay-href="" class="layadmin-backlog-body"><h3>面积</h3>
                                    <p><cite>{$res.area} m²</cite></p></a></li>

                                <li class="layui-col-xs12"><a lay-href="" class="layadmin-backlog-body"><h3>地址</h3>
                                    <p><cite>{$res.address}</cite></p></a></li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">管理团队</div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel  layadmin-backlog" lay-anim=""
                         style="width: 100%; height: 360px !important;">
                        <div carousel-item="">
                            <ul class="layui-row layui-col-space10 layui-this">
                                <li class="layui-col-xs12"><a lay-href="" class="layadmin-backlog-body"><h3>项目经理</h3>
                                    <p><cite>{$res.pm}</cite></p></a></li>
                                <li class="layui-col-xs12"><a lay-href="" class="layadmin-backlog-body"><h3>客户经理</h3>
                                    <p><cite>{$res.am}</cite></p></a></li>
                                <li class="layui-col-xs12"><a lay-href="" class="layadmin-backlog-body"><h3>质检</h3>
                                    <p><cite>{$res.qc}</cite></p></a></li>
                                <li class="layui-col-xs12"><a lay-href="" class="layadmin-backlog-body"><h3>设计师</h3>
                                    <p><cite>{$res.ds}</cite></p></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>


        </div>

        <div class="layui-col-md9">


            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">


                        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <ul class="layui-tab-title">
                                <li class="layui-this">施工图纸</li>
                                <li>施工标准</li>

                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">

                                    {foreach $tuzhi2 as $key=>$vo}
                                    <div class="layui-upload-drag upload_more check" style="padding: 2px;"
                                         onclick="checkTuzhi(this)">
                                        <div style="margin-top: 5px;width: 80px" class="layui-elip">
                                            {$vo.name}
                                        </div>
                                        <img class="layui-upload-img"
                                             style="width: 80px;height: 80px; object-fit: cover;"
                                             data_src="{$qn_domain}/{$vo.src}"
                                             src="{$qn_domain}/{$vo.src}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">
                                    </div>
                                    {/foreach}

                                </div>
                                <div class="layui-tab-item">
                                    {$stage.biaozhun}
                                </div>

                            </div>
                        </div>


                    </div>
                </div>
            </div>


            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">


                        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <ul class="layui-tab-title">
                                <li class="layui-this">新订单</li>
                                <li>订单列表</li>

                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">


                                    <button onclick="select_material()" class="layui-btn layui-btn-sm">选择材料
                                    </button>

                                    <form class="layui-form" action="">

                                        <div class="layui-row" v-for="(item,index) in list"
                                             style="margin-bottom: 20px">

                                            <table class="layui-table" lay-skin="line">
                                                <thead>
                                                <tr>
                                                    <th>{{item.name}}</th>
                                                    <th style="width: 100px">数量</th>
                                                    <th style="width: 300px">备注</th>
                                                    <th style="width: 50px"></th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr v-for="(gd,gi) in item.goods">
                                                    <td><b :data_id="gd.id">{{gd.name}}</b></td>
                                                    <td>
                                                        <div class="layui-input-inline">
                                                            <input type="text" :value="gd.num" :pindex="index"
                                                                   :gindex="gi" placeholder="请输入"
                                                                   autocomplete="off"
                                                                   class="layui-input goods_num">
                                                        </div>

                                                        <!--<div class="quantity">-->
                                                        <!--<span  @click="change(item,-1)"-->
                                                        <!--class="layui-btn layui-btn-sm">-</span>-->
                                                        <!--<input type="text" value="" v-model="item.num">-->
                                                        <!--<span  @click="change(item,1)"-->
                                                        <!--class="layui-btn layui-btn-sm">+</span>-->
                                                        <!--</div>-->
                                                    </td>
                                                    <td>
                                                        <div class="layui-input-inline" style="width: 100%">
                                                            <input type="text" placeholder="请输入" autocomplete="off"
                                                                   :value="gd.notice" :pindex="index"
                                                                   :gindex="gi" placeholder="请输入"
                                                                   class="layui-input goods_notice">
                                                        </div>

                                                    </td>
                                                    <td>
                                                        <a href="javascript:;" @click="delGood(index,gi)"
                                                           style="color: rgb(0, 150, 136);">
                                                            删除
                                                        </a>
                                                    </td>
                                                </tr>

                                                </tbody>
                                            </table>

                                        </div>

                                        <div class="layui-form-item songhuo" style="margin-top: 20px;display: none">

                                            <label class="layui-form-label" style="text-align: left">送货时间</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="songhuo" id="time" required
                                                       lay-verify="required" placeholder="请选择" autocomplete="off"
                                                       class="layui-input">
                                            </div>
                                        </div>

                                        <div class="form-footer2" style="text-align: center;margin-top: 50px">


                                                <span onclick="add()" class="layui-btn"><i
                                                        class="layui-icon">&#xe609;</i> 提交订单并通知商家
                                                </span>
                                        </div>

                                    </form>

                                </div>
                                <div class="layui-tab-item">

                                    <div class="layui-row" v-for="(item,index) in stage_goods"
                                         style="margin-bottom: 20px">

                                        <table class="layui-table" lay-skin="line">
                                            <thead>
                                            <tr>
                                                <th colspan="3"><b style="width: 100px;">{{item.shop_name}}</b> 订单号：{{item.order_id}} 下单：{{item.create_time}} 送货时间:{{item.songhuo}}</th>
                                                <!--<th style="width: 100px">数量</th>-->
                                                <!--<th style="width: 300px">备注</th>-->
                                                <th style="width: 50px">{{item.status_text}}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(gd,gi) in item.goods">
                                                <td><b :data_id="gd.id">{{gd.goods_name}}</b></td>
                                                <td>
                                                    x {{gd.goods_num}}
                                                </td>
                                                <td colspan="2">
                                                    <div class="layui-input-inline" style="width: 100%">
                                                        {{gd.goods_notice}}
                                                    </div>

                                                </td>

                                            </tr>

                                            </tbody>
                                        </table>

                                    </div>

                                </div>

                            </div>
                        </div>


                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">


                        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <ul class="layui-tab-title">
                                <li class="layui-this">工种</li>
                                <li>工作中</li>
                                <li>竞标中</li>
                                <li>施工日志</li>
                                <li>验工申请</li>


                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">

                                    {foreach $tuzhi2 as $key=>$vo}
                                    <div class="layui-upload-drag upload_more check" style="padding: 2px;"
                                         onclick="checkTuzhi(this)">
                                        <div style="margin-top: 5px;width: 80px" class="layui-elip">
                                            {$vo.name}
                                        </div>
                                        <img class="layui-upload-img"
                                             style="width: 80px;height: 80px; object-fit: cover;"
                                             data_src="{$qn_domain}/{$vo.src}"
                                             src="{$qn_domain}/{$vo.src}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">
                                    </div>
                                    {/foreach}

                                </div>
                                <div class="layui-tab-item">
                                    {$stage.biaozhun}
                                </div>

                            </div>
                        </div>


                    </div>
                </div>
            </div>


        </div>


    </div>
</div>


<script>


    var app = new Vue({
        el: '#app',
        data: {
            items: [],
            list: [
//                {
//                    name: '金牛管业',
//                    shop_uid: 110,
//                    goods: [
//                        {
//                            id: 1,
//                            name: '一体大灯',
//                            num: 1,
//                            notice: '备注',
//                        }
//                    ]
//                }
            ],
            stage_goods: [],
        },
        methods: {
            //获取所有数据
            selectedGood: function (n) {
                var i = 0;
                this.list.forEach(function (item, index) {
                    if (item.id == n.id) {
                        i = 1;
                    }
                });
                if (i == 0) {
                    layer.msg('选择成功！');
                    Vue.set(n, 'num', '1');
                    this.list.push(n);
                }
                else {
                    layer.msg('请不要重复选择哟！');
                }
            },
            delGood: function (index, gi) {

                this.list[index].goods.splice(gi, 1);

                if (this.list[index].goods.length == 0) {
                    this.list.splice(index, 1);
                }
                if (this.list.length == 0) {
                    $('.songhuo').hide();
                }


            },
            kup: function (pindex, gindex) {


                var num = $(event.target.tagName).val();
                console.log(this.name);

                this.list[pindex].goods[gindex].num = num;
            },

            change: function (item, way) {
                if (way > 0) {
                    item.num++;
                }
                else {
                    item.num--;
                    if (item.num < 1) {
                        item.num = 1;
                    }
                }
            },
        },
    });


    //监听数量修改
    $(document).on('keyup', '.goods_num', function () {
        console.log(this);
        var num = $(this).val();
        var pindex = $(this).attr('pindex');
        var gindex = $(this).attr('gindex');
        app.list[pindex].goods[gindex].num = num;
    });

    //监听备注修改
    $(document).on('keyup', '.goods_notice', function () {
        console.log(this);
        var notice = $(this).val();
        var pindex = $(this).attr('pindex');
        var gindex = $(this).attr('gindex');
        app.list[pindex].goods[gindex].notice = notice;
    });


    //添加商品
    function add_goods(item) {
        item.num = 1;
        item.notice = '';
        var shop_index = false;
        var is_rname = false;
        for (var index in app.list) {
            if (item.shop_uid == app.list[index].shop_uid) {
                shop_index = index;
                ////ID相同 就增加数量
                var goods_arr = app.list[index].goods;
                for (var i in goods_arr) {
                    if (item.id == goods_arr[i].id) {
                        app.list[index].goods[i].num++;
                        is_rname = true;
                    }
                }

            }

        }
        //如果重量 就增加数量
        if (is_rname) {
            return true;
        }

        if (shop_index != false) {
            app.list[shop_index].goods.push(item);
        } else {
            var li = {
                name: item.shop_name,
                shop_uid: item.shop_uid,
                goods: [
                    item
                ]
            }
            app.list.push(li);
        }
        if (app.list.length > 0) {
            $('.songhuo').show();
        }


    }


    function init() {

        var id = "{:input('id')}";
        $.get('get_stage', {id: id}, function (res) {
            if (res.code != 1) {
                return false;
            }
            app.items = res.data;
            app.items.forEach(function (item, index) {
                if (item.status == 0) {
                    Vue.set(item, 'operate_item', '无');
                }
                if (item.status == 1) {
                    Vue.set(item, 'operate_item', '结束竞标');
                }
                if (item.status == 2) {
                    Vue.set(item, 'operate_item', '完成');
                }
                if (item.status == 3) {
                    Vue.set(item, 'operate_item', '无');
                }
            });

        });


    }


    $(function () {
        init();
        //获取商品
        var id = "{$Request.param.id}";
        $.get("{:url('order/get_stage_goods')}", {stage_id: id}, function (res) {
            app.stage_goods=res.data;
        });


    });
    layui.use(['table', 'layer', 'element', 'laydate'], function () {
        var layer = layui.layer;
        var table = layui.table;
        var table = layui.element;
        var laydate = layui.laydate;

//        layer.photos({
//            photos:  '.upload_more' //格式见API文档手册页
//            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
//        });


        //执行一个laydate实例
        laydate.render({
            elem: '#time' //指定元素
        });

    });
    function del(that) {
        var data_id = $(that).attr('data_id');
        var data_index = $(that).attr('data_index');

        var index = layer.confirm('确认继续执行？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.post('{:url("del_stage")}', {id: data_id}, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1})
                    app.items.splice(data_index, 1);
                }
                layer.close(index);
            });
        }, function () {
            layer.close(index);
        });
    }
    function edit(that) {
        //项目id，为了从编辑返回
        var id = "{$Request.param.id}";
        //阶段id
        var data_id = $(that).attr('data_id');
        var path = "{:url('edit_stage')}?id=" + data_id + "&pid=" + id;
        go(path);
    }
    function add() {
        //点击添加时，传递阶段id
        var id = "{$Request.param.id}";
        console.log(id);
        var time = $('#time').val();
        if (!time) {
            layer.msg('缺少送货时间');
            return false;
        }
        $.post("{:url('order/stage_goods_add')}", {stage_id: id, goods: app.list, songhuo: time}, function (res) {
            if (res.code == 1) {
                layer.msg(res.msg, {icon: 1});
                location.reload();
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        });


    }
    function material_list(that) {
        var data_id = $(that).attr('data_id');
        layer.open({
            type: 2,
            title: '材料',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('select_material_list')}?id=" + data_id
        });
    }
    function workert_list(that) {
        var data = $(that).attr('data_w');
        layer.tips(data, $(that), {
            tips: [1, '#009688'],
            time: 4000
        });
    }
    function worker_list(that) {
        var data_id = $(that).attr('data_id');
        layer.open({
            type: 2,
            title: '',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('project_worker')}?id=" + data_id
        });
    }
    function operate(that) {
        var status = 0;
        var data_id = $(that).attr('data_id');
        var data_op = $(that).attr('data_op');
        if (data_op == "发布") {
            status = 1;
        }
        if (data_op == "结束竞标") {
            status = 2;
        }
        if (data_op == "完成") {
            status = 3;
        }
        var index = layer.confirm('确认继续执行？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.post('{:url("stage_status")}', {id: data_id, status: status}, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1});
                    location.reload();
                }
                layer.close(index);
            });
        }, function () {
            layer.close(index);
        });
    }
    function bid(that) {
        var data_id = $(that).attr('data_id');
        layer.open({
            type: 2,
            title: '竞标管理',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('bid')}?id=" + data_id
        });
    }
    function log(that) {
        var data_id = $(that).attr('data_id');
        layer.open({
            type: 2,
            title: '施工日志',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('stage_log')}?id=" + data_id
        });
    }

    function select_material() {
        layer.open({
            type: 2,
            title: '材料',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('select_material')}",
        });
    }


    //图片预览
    function checkTuzhi(that) {
        var ph = $(that).find('.layui-upload-img').attr('data_src');
        var json = {
            "title": "", //相册标题
            "id": 123, //相册id
            "start": 0, //初始显示的图片序号，默认0
            "data": [   //相册包含的图片，数组格式
                {
                    "alt": "图纸",
                    "pid": 666, //图片id
                    "src": ph, //原图地址
                    "thumb": ph //缩略图地址
                }
            ]
        }
        layer.photos({
            photos: json
            , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });

    }


</script>
</body>
</html>